<script setup lang="ts">
import FriendLinkItem from '@/components/FriendLinkItem/index.vue'
import {defineProps} from 'vue'
const props = defineProps(['linkItems','groupItem'])
// console.log('linkItems',props.linkItems);

</script>

<template>
  <div class="friend-link-group" v-if="linkItems.length > 0">
    <div class="friend-link-group-title">
      {{ groupItem.groupName }}
    </div>
    <div class="friend-link-list">
      <FriendLinkItem :link-item="linkItem"  v-for="linkItem in linkItems"></FriendLinkItem>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.friend-link-group {
  .friend-link-group-title {
    padding: 5px 10px;
    display: inline-block;
    background-color: #000000;
    color: #fff;
    border-radius: 20px 0px 20px 0px;
    transition: .3s all;
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 10px 3px #000000;
    }
  }
}



.friend-link-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem; // 调整子项之间的间距
  padding: 20px 0px;
  box-sizing: border-box;
}
</style>
